/**
 * 费用类别自定义字段设置messageKey
 */
import { messages } from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Select, Input, message } from 'antd'
const Option = Select.Option;

import Condition from 'components/condition'
const { If, Else } = Condition;

import expenseTypeService from 'containers/setting/expense-type/expense-type.service'

class MessageKeySetting extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      fixedMessageKey: {
        ASSOCIATE_APPLICATION: 'associate.application', //关联申请单
        COMPANY_PAID: 'company.paid',                   //公司已付
        START_DATE_AND_END_DATE: 'dateCombined',        //开始结束日期
        LOCATION: 'location',                           //城市
        PARTICIPANT: 'participant',                     //同行人
        PARTICIPANTS: 'participants',                   //参与人
        // CUSTOM_ENUMERATION: 'business.type'          //业务用途（因为业务用途是特殊的值列表，所以没有与filedType的对应关系）
      },
      options: [],
      widget: props.widget,
    }
  }

  componentDidMount() {
    this.getOptions(this.props.widget)
  }

  componentWillReceiveProps(nextProps) {
    let { widget } = this.state;
    this.setState({ widget: nextProps.widget });
    if (nextProps.widget.fieldType !== widget.fieldType) {
      this.getOptions(nextProps.widget)
    }
  }

  getOptions = (widget) => {
    const { fixedMessageKey } = this.state;
    if (!~Object.keys(fixedMessageKey).indexOf(widget.fieldType) && widget.messageKey !== 'business.type') {
      widget.fieldType && expenseTypeService.getMessageKeyList(widget.fieldType).then(res => {
        this.setState({ options: res.data.rows || [] })
      })
    }
  };

  handleChange = (value) => {
    const { customEnumeration } = this.props;
    let { widget, options } = this.state;
    let valueListType = null;
    let reg = /^[\.a-zA-Z]*$/;
    if (value.length <= 50 && reg.test(value)) {
      widget.messageKey = value;
    } else if (value.length > 50) {
      message.warning(messages('common.max.characters.length', {max: 50}))
    }  else if (!reg.test(value)) {
      message.warning(messages('setting.key2100')/*仅支持英文和小数点*/)
    }
    options.map(item => {
      item.businessKey === value && (valueListType = item.valueListType)
    });
    //有联动的值列表
    if (valueListType) {
      customEnumeration.map(item => {
        if (String(item.systemCustomEnumerationType) === String(valueListType)) {
          widget.customEnumerationOID = item.customEnumerationOID;
        }
      })
    }
    this.setState({ widget });
    this.props.onChange(widget)
  };

  render() {
    const { tenantMode } = this.props;
    const { fixedMessageKey, options, widget } = this.state;
    return (
      <div className="message-key-setting">
        <div className="widget-setting-title">{messages('setting.key2101')/*业务编码*/}</div>
        <Condition>
          <If value={~Object.keys(fixedMessageKey).indexOf(widget.fieldType) || widget.isBusinessType}>
            <Input value={fixedMessageKey[widget.fieldType] || 'business.type'} disabled/>
          </If>
          <Else>
            <Select
              mode="combobox"
              disabled={!tenantMode || widget.isCommonField} //初始化的字段messageKey不可编辑
              value={widget.messageKey || undefined}
              onChange={this.handleChange}
            >
              {options.map(item => (
                <Option key={item.businessKey} title={item.businessKey}>
                  <div>
                    <div>{item.businessKey}</div>
                    <div style={{color: '#9ba2bb'}}>{item.name}</div>
                  </div>
                </Option>
              ))}
            </Select>
          </Else>
        </Condition>
      </div>
    )
  }
}

MessageKeySetting.contextTypes = {
  widget: React.PropTypes.object,
  customEnumeration: React.PropTypes.object,
  onChange: React.PropTypes.func,
};

function mapStateToProps(state) {
  return {
    tenantMode: state.main.tenantMode
  }
}

export default connect(mapStateToProps)(MessageKeySetting)
